<template>
    <div>
        <!-- 头部刷新区域 -->
        <div class="setdiv">
            <span>订单设置</span>
            <el-button class="refreshRight" plain icon="el-icon-refresh" @click="REfResh">刷新</el-button>
        </div>
        <!-- 卡片视图区域 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix getColor">
                <span>订单设置</span>
            </div>
            <!-- 用户信息表单区域 -->
            <div class="content">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125px">
                    <el-form-item label="正常订单超过" prop="time1">
                        <el-col :span="10">
                            <el-input placeholder="30" v-model.number="ruleForm.time1"><template class="width_Dw" slot="append">分</template></el-input>
                        </el-col>
                        <el-col :span="14">
                            <p>未付款，订单自动关闭</p>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="付款超过" prop="time2">
                        <el-col :span="10">
                            <el-input placeholder="12" v-model.number="ruleForm.time2"><template class="width_Dw" slot="append">小时</template></el-input>
                        </el-col>
                        <el-col :span="14">
                            <p>未付款，订单自动关闭</p>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="发货超过" prop="time3">
                        <el-col :span="10">
                            <el-input placeholder="7" v-model.number="ruleForm.time3"><template class="width_Dw" slot="append">天</template></el-input>
                        </el-col>
                        <el-col :span="14">
                            <p>未确认收货，订单自动完成</p>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="订单完成超过" prop="time4">
                        <el-col :span="10">
                            <el-input placeholder="7" v-model.number="ruleForm.time4"><template class="width_Dw" slot="append">天</template></el-input>
                        </el-col>
                        <el-col :span="14">
                            <p>自动关闭，不能申请售后</p>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="订单完成超过" prop="time5">
                        <el-col :span="10">
                            <el-input placeholder="10" v-model.number="ruleForm.time5"><template class="width_Dw" slot="append">天</template></el-input>
                        </el-col>
                        <el-col :span="14">
                            <p>自动五星好评</p>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="无备注订单超过" prop="time6">
                        <el-col :span="10">
                            <el-input placeholder="2" v-model.number="ruleForm.time6"><template class="width_Dw" slot="append">小时</template></el-input>
                        </el-col>
                        <el-col :span="14">
                            <p>自动确认</p>
                        </el-col>
                    </el-form-item>
                </el-form>
                <el-button type="primary" class="anniu" @click="addok">提交</el-button>
            </div>
        </el-card>
    </div>
</template> 
 <script>
export default {
    data() {
        // 表单的验证
        var rules1 = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("时间不能为空"));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error("请输入时间"));
                } else {
                    if (value > 30) {
                        callback(new Error("时间必须小于30分钟"));
                    } else {
                        callback();
                    }
                }
            }, 1000);
        };
        var rules2 = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("时间不能为空"));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error("请输入时间"));
                } else {
                    if (value > 12) {
                        callback(new Error("时间必须小于12小时"));
                    } else {
                        callback();
                    }
                }
            }, 1000);
        };
        var rules3 = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("时间不能为空"));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error("请输入时间"));
                } else {
                    if (value > 7) {
                        callback(new Error("时间必须小于7天"));
                    } else {
                        callback();
                    }
                }
            }, 1000);
        };
        var rules4 = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("时间不能为空"));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error("请输入时间"));
                } else {
                    if (value > 10) {
                        callback(new Error("时间必须小于10天"));
                    } else {
                        callback();
                    }
                }
            }, 1000);
        };
        var rules5 = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("时间不能为空"));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error("请输入时间"));
                } else {
                    if (value > 2) {
                        callback(new Error("时间必须小于2小时"));
                    } else {
                        callback();
                    }
                }
            }, 1000);
        };
        return {
            imageUrl: "",
            ruleForm: {
                time1: "",
                time2: "",
                time3: "",
                time4: "",
                time5: "",
                time6: "",
            },
            rules: {
                time1: [{ validator: rules1, trigger: "blur" }],
                time2: [{ validator: rules2, trigger: "blur" }],
                time3: [{ validator: rules3, trigger: "blur" }],
                time4: [{ validator: rules3, trigger: "blur" }],
                time5: [{ validator: rules4, trigger: "blur" }],
                time6: [{ validator: rules5, trigger: "blur" }],
            },
        };
    },
    created() {},
    methods: {
        // 刷新
        REfResh() {
            this.$message({
                message: "已刷新",
                type: "success",
            });
        },
        addok() {
            this.$message({
                message: "提交成功",
                type: "success",
            });
        },
    },
};
</script> 
<style lang="less" scoped>
.setdiv {
    background-color: #f2f2f2;
    padding: 17.5px 0;
    position: relative;
}
.setdiv > span {
    margin-left: 20px;
}
.refreshRight {
    position: absolute;
    right: 20px;
    top: 8px;
}
.el-card {
    margin-top: 20px;
}
.set {
    background-color: #f2f2f2;
    padding: 0;
}
.el-card > .set {
    padding: 0;
}
.clearfix > span {
    padding: 0 !important;
}
.el-card /deep/ .el-card__header {
    background-color: #f2f2f2;
}
.anniu {
    margin-left: 47.5%;
    width: 5%;
}
.el-form {
    width: 32%;
    margin-left: 34%;
}
</style> 

